<section id="notification-bar" x-data="{ show: true }" hx-swap-oob="{{ oob | default('true') }}">
  {% if notification %}
    {% set notification = notification if notification is mapping else {"message": notification} %}
    {% set message = notification.get('message', "") %}
    {% set icon = "exclamation-triangle" if notification.get("error") else notification.get('icon', "information-circle") %}
    {% set class = "alert-error" if notification.get("error") else notification.get('class', "alert-info") %}
    {% set duration = notification.get('duration', 10) %}

    <div x-show="show" x-transition class="toast toast-center toast-bottom w-1/2 z-50">
      <div class="alert flex flex-col w-full gap-2 cursor-pointer {{ class }}" role="alert" @click="show = false">
        <div class="flex items-center gap-2">
          {{ heroicon_outline(icon) }}
          <span id="notification-message">{{ message }}</span>
        </div>
        <div class="w-full h-2 bg-black/20 rounded overflow-hidden">
          <div class="h-full bg-black {{ 'animate-shrink-30' if duration >= 30 else ('animate-shrink-20' if duration >= 20 else 'animate-shrink-10') }}"
               @animationend="show = false" /></div>
        </div>
      </div>
    {% endif %}
  </section>
